<template>
  <el-dialog v-model="props.dialogOpen" :title="props.groupTitle" destroy-on-close="true" :before-close="submitClose"
    :close-on-click-modal="false">
    <!-- 任务标题 -->
    <el-form ref="groupRef" :model="props.groupData.form" :rules="rules">
      <el-form-item label="群组名称" prop="name" label-width="80px" size="large">
        <el-input v-model="props.groupData.form.name" autocomplete="off" maxlength="10" show-word-limit type="text"
          style="width:200px" />
      </el-form-item>
      <el-form-item label="群组人员" label-width="80px" prop="valueInfo" size="large">

        <el-cascader ref="cascaderRef" v-model="cascadeData" :options="props.groupData.options" clearable
          :show-all-levels="false" :props="propsCade" filterable placeholder="请选择群组人员"
          @change="changeAcademic(cascaderRef)" />
      </el-form-item>
      <!-- :show-all-levels="false" -->
    </el-form>
    <!-- 确认与取消 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(groupRef)">取消</el-button>
        <el-button type="primary" @click="submitSure(groupRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useList } from "../../store";



const store = useList()
// //拿到父组件传的值
// const props = defineProps(['groupData'])
const props = defineProps({
  groupData: {
    type: Object
  },
  taskTitle: {
    type: String
  },
  dialogOpen: {
    type: Boolean
  },
  modalTypes: {
    type: Boolean
  },

});

const emit = defineEmits(['submitClose', 'changeAcademic', 'resetForm','submitSure']);
//使用defineEmits语法糖的方法来创建自定义事件
let { cascadeData } = toRefs(props.groupData)


// const valueInfo = props.modalTypes == false ? ref([]) : ref(cascadeData)

//默认选中
// let valueInfo = ref()

let cascaderRef = ref(null)

const groupRef = ref('')

//级联选择器
const propsCade = reactive({
  multiple: true,
  // checkStrictly: true
})

//群组校验
const checkAge = (rule, value, callback) => {
  console.log(value,'111')
  if (cascadeData.value == '') {
    return callback(new Error('请选择群组人员'))
  } else {
    callback()
  }
  return {}
}
const rules = {
  name: [{ required: true, message: "群组名称不能为空", trigger: "blur" }],
  valueInfo: [
    { required: true, validator: checkAge, trigger: "blur" },
    // { type: 'array', message: '请选择人员' }
  ]
}


const submitSure = (val) => {
  emit('submitSure', val)

}

//关闭弹窗
const submitClose = () => {
  emit('submitClose')

}

//取消
const resetForm = (val) => {
  emit('resetForm', val)

}

//节点改变后拿到节点数据
const changeAcademic = (cascaderRef) => {
  emit('changeAcademic', cascaderRef)
}


</script>
<style lang="less" scoped>
.el-form {
  height: 37vh;
}

.el-cascader {
  .el-input {
    width: 655px;
  }
}

:deep(.el-tooltip__trigger) {
  width: 1000px;
}</style>